/*
 * @Author: Wilbur
 * @Date: 2018-11-19 09:53:27
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-08 14:31:14
 */

<template>
    <div class="container record-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="用户昵称：">
                            <el-input
                                v-model="filterData.nickname"
                                placeholder="请输入..."
                                clearable
                                @change="getTableData(1)"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="手机号：">
                            <el-input
                                v-model="filterData.phone"
                                placeholder="请输入..."
                                clearable
                                @change="getTableData(1)"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="奖品：">
                            <el-select
                                v-model="filterData.item_no"
                                placeholder="请选择..."
                                clearable
                                @change="getTableData(1)"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.item_no"
                                    :label="item.title"
                                    :value="item.item_no"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                        <el-button
                            size="small"
                            @click="fnResetFilterData">重置</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    @sort-change="handleSortChanged"
                    @selection-change="handleSelectionChange">
                    <!-- <el-table-column
                        type="selection"
                        width="40" /> -->
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="lottery_title"
                        label="活动名称"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="nickname"
                        show-overflow-tooltip
                        label="抽奖用户" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="phone"
                        show-overflow-tooltip
                        label="手机号" />
                    <el-table-column
                        prop="item_title"
                        show-overflow-tooltip
                        label="抽奖结果" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.item_title !== ''">{{ scope.row.item_title }}</span>
                            <span v-if="scope.row.item_title == ''">--</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        show-overflow-tooltip
                        label="抽奖时间" >
                        <template slot-scope="scope">
                            {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div
                class="pagination-wrapper clearfix"
                v-if="tableData.length > 0"
            >
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>

<script>
let sortMap = {
    'ascending': 'asc',
    'descending': 'desc'
};

export default {
    data() {
        return {
            lottery_no: '',
            options: [],
            authResult: {},
            tableData: [],
            filterData: {
                nickname: '',
                phone: '',
                item_no: ''
            },
            sortData: {
                field: '',
                by: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            transformIds: []
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: "抽奖记录"
            }
        ]);
        this.lottery_no = this.$route.query.lottery_no;
        if(this.lottery_no){
            this.getLottery();
            this.getTableData();
        }else{
            this.$message({
                type: 'warning',
                center: true,
                message: '参数缺失'
            });
        }
    },
    methods: {
        fnResetFilterData(){
            this.filterData = {
                nickname: '',
                phone: '',
                item_no: ''
            };
            this.getTableData(1);
        },
        /**
         * 获取任务名称列表
         */
        getLottery() {
            this.$post('/task/lottery%5Cget', {
                lottery_no: this.lottery_no
            }, resp => {
                if (resp.code == 1) {
                    this.options = resp.data.lottery_item_list;
                }
            });
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            let { nickname, phone, item_no } = this.filterData;

            this.$post('/task/lottery_try_log%5Clist', {
                page: page || this.page.now_page,
                lottery_no: this.lottery_no,
                nickname,
                phone,
                item_no,
            }, resp => {
                if (resp.code == 1) {
                    this.transformIds = [];
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 排序
         */
        handleSortChanged(data) {
            if (data.order) {
                this.sortData.field = data.prop;
                this.sortData.by = sortMap[data.order];
            } else {
                this.sortData.field = '';
                this.sortData.by = '';
            }

            this.getTableData();
        },

        /**
         * 选择表格行
         */
        handleSelectionChange(val) {
            let arr = [];

            val.forEach(item => {
                if (item.score > 0) {
                    arr.push(item.user_no);
                }
            });
            this.transformIds = [].concat(arr);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    overflow: hidden;
    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>